<div class="sm-rightPanel">
    <div class="layui-anim layui-anim-upbit">
        <div id="list_form" class="layui-form sm-operation">
            <blockquote class="site-text layui-elem-quote">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">状态：</label>
                        <div class="layui-input-inline">
                            <select id="typeList" name="type" lay-filter="typeList">
                                <option value="">全部</option>
                                <option value="0">核心服务</option>
                                <option value="1">服务案例</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button id="query" class="layui-btn"><i class="iconfont icon-sousuo"></i>查询</button>
                    </div>
                </div>
            </blockquote>

            <div class="layui-form-item">
                <button class="layui-btn layui-btn-normal" id="role_add">
                    <i class="iconfont icon-add"></i>添加
                </button>
                <button class="layui-btn layui-btn-danger" id="role_del">
                    <i class="iconfont icon-delete"></i>删除
                </button>
            </div>
        </div>
        <table id="list_table" class="layui-hide" lay-filter="mainList"></table>
    </div>
</div>

<script>

    layui.use(['layer', 'table', 'form', 'layedit'], function () {
        var layedit = layui.layedit;
        var layer = layui.layer;
        var table = layui.table;
        var form = layui.form;
        var $ = layui.$;

        //表单重新渲染
        form.render();

        //表格渲染
        var tableObj = table.render({
            id: 'list_table'
            , elem: '#list_table'
            , url: '/websiteserviceintroduction/list'
            , align: "center"
            , cols: [[ //表头
                {type: 'checkbox'}
                , {type: 'numbers', title: '序号', width: 50}
                , {field: 'title', title: '标题', width: 140, align: 'center'}
                , {field: 'summary', title: '摘要', width: 250, align: 'center'}
                , {
                    field: 'imgPath', title: '封面图', width: 180, align: 'center', templet: function (d) {
                        return "<img class='fans-portrait' src=" + d.imgPath + " />"
                    }
                }
                , {
                    field: 'type', title: '类型', width: 100, align: 'center', templet: function (d) {
                        return d.type == 0 ? '核心服务' : '服务案例';
                    }
                }
                , {field: 'createTime', title: '添加时间', width: 170, align: 'center'}
                , {field: 'updateTime', title: '修改时间', width: 170, align: 'center'}
                , {
                    field: 'lock', title: '操作', width: 150, templet: function (d) {
                        return '<button class="layui-btn layui-btn-warm layui-btn-sm" lay-event="detail">修改</button>';
                    }, unresize: true, align: 'center'
                }
            ]]
        });

        //监听工具条
        table.on('tool(mainList)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值

            if (layEvent === 'detail') {

                smartAui.dialog({
                    title: '修改'
                    , template: 'edit'
                    , saveUrl: '/websiteserviceintroduction/save'
                    , tableObj: tableObj
                    , width: 850
                    , height: 650
                    , htmlData: data
                    , success: function () {

                        // 设置富文本上传接口
                        layedit.set({
                            uploadImage: {
                                url: '/managerImg/uploadFile',
                                type: 'post'
                            },
                        });

                        //layeditIndex = layedit.build('content');
                        layeditIndex = layedit.build('content', {
                            tool: ['strong', 'italic', 'underline', 'del'
                                , '|'
                                , 'left', 'center', 'right'
                                , '|'
                                , 'link', 'unlink', 'face', "code",
                                '|',
                                'image'
                            ]
                        });

                    }
                    , beforeSubmit: function (data) {
                        data.content = layedit.getContent(layeditIndex);

                        if (data.content != null && data.content != "") {

                        } else {
                            layer.msg("请填写内容!");
                            return false;
                        }
                        return true;
                    }
                })
            }
        });

        $("#role_add").click(function () {
            var layeditIndex;

            smartAui.dialog({
                title: '添加'
                , template: 'add'
                , saveUrl: '/websiteserviceintroduction/save'
                , tableObj: tableObj
                , width: 850
                , height: 650
                , success: function () {

                    // 设置富文本上传接口
                    layedit.set({
                        uploadImage: {
                            url: '/managerImg/uploadFile',
                            type: 'post'
                        },
                    });

                    //layeditIndex = layedit.build('content');
                    layeditIndex = layedit.build('content', {
                        tool: ['strong', 'italic', 'underline', 'del'
                            , '|'
                            , 'left', 'center', 'right'
                            , '|'
                            , 'link', 'unlink', 'face', "code",
                            '|',
                            'image'
                        ]
                    });
                }
                , beforeSubmit: function (data) {
                    data.content = layedit.getContent(layeditIndex);

                    if (data.content != null && data.content != "") {

                    } else {
                        layer.msg("请填写内容!");
                        return false;
                    }
                    return true;
                }
            })
        });

        $("#role_del").click(function () {
            var data = table.checkStatus('list_table').data;
            var arr = [];
            for (var i = 0; i < data.length; i++) {
                arr.push(data[i].id);
            }
            if (data.length == 0) {
                layer.msg("请至少选择一条");
                return;
            }

            smartAui.confirm('确认删除？', function () {
                $.ajax({
                    type: "GET",
                    url: '/websiteserviceintroduction/delete',
                    data: {"id": arr.join(",")},
                    success: function (result) {
                        if (result.success) {
                            layer.msg("删除成功");
                            smartAui.reloadTable(tableObj);
                        } else {
                            layer.msg("删除异常");
                        }
                    },

                })
            }, 0);
        });

        //查询数据
        $('#query').on('click', function () {
            smartAui.reloadTable(tableObj);
        });

    });


</script>